<template>
    <div class="md-comtainer">
        <div class="nav">
            <h2 class="cu-text-blue"><i class="iconfont icon-changge"></i>综艺</h2>
            <a href="#" class="cu-text-blue more">更多>>></a>
            <ul class="list-group d-flex flex-row">
                <li><div class="tag">最新综艺</div></li>
                <li><div class="tag">最新综艺</div></li>
                <li><div class="tag">最新综艺</div></li>
            </ul>
            <div class="leftRight xxl-hiden">
                <span class="cu-hand" :class="{'active':!leftOrRight}" @click="move(-1)">◀ </span>
                <span class="cu-hand" :class="{'active':leftOrRight}" @click="move(1)">▶ </span>
            </div>
        </div>
        <md ref="md"></md>
    </div>
</template>

<script>
    import md from './md.vue';
    export default {
        name: "mdcontainer",
        data(){
          return{
              leftOrRight:true
          }
        },
        methods:{
            move(orientation){
                if(orientation == 1){
                    this.$refs.md.moveItem();
                    this.leftOrRight=false;
                }else {
                    this.$refs.md.moveItem('left');
                    this.leftOrRight=true;
                }
            }
        },
        components:{
            md
        }
    }
</script>

<style scoped lang="scss">
.md-comtainer{
    .nav{
        position: relative;
        margin-bottom: 10px;
        width: 100%;
         .icon-changge{
             color: #148aff;
             font-size: 26px;
             margin-right: 10px;
             transform: rotateX(180deg);
         }
        h2{
            font-size: 26px;
            color: hsla(0,0%,100%,.87);
            vertical-align: middle;
        }
        .more{
            color: hsla(0,0%,100%,.38);
            font-size: 14px;
            vertical-align: middle;
            margin:0 20px;
            line-height: 30px;
        }
        .list-group{
            .tag{
                padding: 5px 10px;
                color: #bfbfbf;
                height: 28px;
                background-color:#343a40;
                margin: 0 10px;
                border-radius: 28px;
                &:hover{
                    cursor: pointer;
                    background-color: #00BEFF;
                    color: white;
                }
            }
        }
        .leftRight{
            position: absolute;
            right: 0;
            top: 10%;
            color: #343a40;
            .active{
                color: white;
            }
            span{
                line-height: 24px;
                text-align: center;
                display: inline-block;
                width: 24px;
            }
        }
    }
}
</style>